<template>
    <div>
        <van-nav-bar
            v-if="!noNav.includes($route.name)"
            :title="pageMeta.title"
            :left-text="pageMeta.leftText"
            :right-text="pageMeta.rightText"
            :left-arrow="pageMeta.leftArrow"
            safe-area-inset-top
            @click-left="clickLeft"
            @click-right="clickRight"
        >
            <template #right v-if="pageMeta.rightIcon">
                <van-icon :name="pageMeta.rightIcon" size="18" />
            </template>
        </van-nav-bar>
        <keep-alive :include="cachePage">
            <router-view/>
        </keep-alive>
        <van-tabbar v-if="!noTabbar.includes($route.name)" v-model="active">
            <van-tabbar-item icon-prefix='iconfont icon' icon='shouye' name="home" to='/'>首页</van-tabbar-item>
            <van-tabbar-item icon-prefix='iconfont icon' icon='wenda' name="qa" to='/qa'>问答</van-tabbar-item>
            <van-tabbar-item icon-prefix='iconfont icon' icon='shipin' name="video" to='/video'>视频</van-tabbar-item>
            <van-tabbar-item icon-prefix='iconfont icon' icon='wode' name="user" to='/user'>我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import meta from './meta';

export default {
    data () {
        return {
            pageMeta: {},
            active: '',
            noNav: ['index', 'user', 'search'],
            noTabbar: ['login', 'search', 'article-id', 'user-edit']
        };
    },
    computed: {
        ...mapState({
            cachePage: 'cachePage'
        })
    },
    watch: {
        $route: {
            handler (val) {
                this.pageMeta = meta[val.name];
                this.currTab();
            },
            immediate: true
        }
    },
    methods: {
        ...mapActions(['defaultCache']),
        clickLeft () {
            console.log('点了左边的按钮');
            this.$router.back();
        },
        clickRight () {
            console.log('点了右边的按钮');
        },
        changeTab () {
            console.log('当前的tab为：', this.active);
        },
        currTab () {
            if (this.$route.path === '/') this.active = 'home';
            else if (this.$route.path.includes('qa')) this.active = 'qa';
            else if (this.$route.path.includes('video')) this.active = 'video';
            else if (this.$route.path.includes('user')) this.active = 'user';
        }
    },
    mounted () {
        console.log('mounted layout');
        this.defaultCache();
        this.currTab();
    }
};
</script>
<style lang="less" scoped>
.van-nav-bar {
    background-color: #3296fa;
    /deep/ .van-nav-bar__content {
        .van-nav-bar__title {
            color: #fff;
        }
        .van-nav-bar__left, .van-nav-bar__right {
            .van-icon {
                color: #fff;
            }
        }
    }
}
</style>
